<template>
  <div class="juniorschoolSubject">
    <!-- 默认应用列表 -->
    <section
      v-if="!datas.imageList || !datas.imageList[0]"
      :class="[datas.commodityType === 1 ? 'defaultNavigationList1' : '']"
      class="defaultNavigation"
    >
      <div
        v-for="index in 4"
        :key="index"
        class="defaultNavigationList"
        :class="[
          datas.commodityType === 0 ? 'defaultNavigationList0' : '',
          datas.commodityType === 1 ? 'defaultNavigationList1' : '',
        ]"
      >
        <div class="navbg">
          <img draggable="false" src="../../../../assets/images/xueke.png" alt="" />
          <!-- 应用 -->
          <div class="navigationList">
            <div class="navlist">
              <div class="daohanglist" v-for="index in 3" :key="index">
                <!-- 图片 -->
                <img src="../../../../assets/images/imgs.png" alt="默认图片" draggable="false" :style="{ 'border-radius': datas.borderRadius + '%' }" />
                <!-- 文字 -->
                <p :style="{ color: datas.textColor }">应用名称</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 图文样式 -->
    <section
      v-if="datas.imageList || datas.imageList[0]"
      :class="[datas.commodityType === 1 ? 'defaultNavigationList1' : '']"
      class="defaultNavigation"
    >
      <div
        v-for="(item, index) in datas.imageList"
        :key="index"
        class="defaultNavigationList"
        :class="[
          datas.commodityType === 0 ? 'defaultNavigationList0' : '',
          datas.commodityType === 1 ? 'defaultNavigationList1' : '',
        ]"
      >
        <div class="navbg">
          <img draggable="false" v-if="item.bakcgroundImg" :src="item.bakcgroundImg" alt="" />
          <img draggable="false" v-else src="../../../../assets/images/xueke.png" alt="" />
          <!-- 应用 -->
          <div class="navigationList">
            <div class="navlist">
              <div class="daohanglist" v-for="(it, ind) in item.application" :key="ind">
                <!-- 图片 -->
                <img :src="it.src" alt="默认图片" draggable="false" :style="{ 'border-radius': datas.borderRadius + '%' }" />
                <!-- 文字 -->
                <p :style="{ color: datas.textColor, 'font-size': datas.textSize + 'px', }">
                  {{ it.text }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: "JuniorschoolSubject",
  props: {
    datas: Object,
  },
  created() {
    console.log(this.datas, "--------juniorschoolSubject");
  },
};
</script>
<style lang="scss" scope>
.juniorschoolSubject {
  .defaultNavigation{
    display:flex;
    padding: 0 15px;
    box-sizing: border-box;
    flex-wrap:nowrap;
    .defaultNavigationList {
      overflow:hidden;
      position: relative;
      /*一行三个 */
      &.defaultNavigationList0 {
        width: 32%;
        flex: none;
        margin-right: 2%;
        flex-direction: column;
        flex-wrap: nowrap;
        .navbg{
          img{
            width:100%;
            height:100%
          }
        }
      }

      /*一行四个 */
      &.defaultNavigationList1 {
        width: 24%;
        flex: none;
        margin-right: 1.3%;
        flex-direction: column;
        flex-wrap: nowrap;
        &:nth-of-type(4n) {
          margin-right: 0 !important;
        }
        .navbg{
          img{
            width:100%;
            height:100%
          }
        }
      }

      /* 导航 */
      .navigationList {
        position: absolute;
        top: 30%;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        .navlist {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .daohanglist {
            width: 25%;
            text-align: center;
            margin-right:20px;
            img {
              width: 45px;
              height: 45px;
              border-radius:45px;
            }
            p {
              font-size: 12px;
              margin-top: 5px;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              text-align: center;
              box-sizing: border-box;
            }
          }
        }
      }

    }
  }
  
}
</style>
